<template>
  <view class="pay-complete" :class="{ show: modelValue }">
    <view class="complete-inner">
      <image class="img" src="/assets/imgs/secure-success.png" v-if="props.success" />
      <image class="img" src="/assets/imgs/secure-fail.png" v-else />
      <view class="title">支付{{ props.success ? '成功' : '失败' }}</view>
      <view>
        <c-button size="inline" @tap="toLook">查看订单</c-button>
        <c-button size="inline" v-if="props.success" type="primary" @tap="toBuy" plain>继续购买</c-button>
      </view>
    </view>
  </view>
</template>
<script setup>
import { CButton } from '@/components';
import { useRouter } from '@/hooks';
import { View } from '@tarojs/components';
const router = useRouter();
const props = defineProps({
  success: Boolean
});

const emit = defineEmits(['look']);

const toLook = () => {
  modelValue.value = false;
  emit('look');
};

const toBuy = () => {
  modelValue.value = false;
  router.switch('/pages/goods/classify/index');
};

const modelValue = defineModel(Boolean);
</script>
<style lang="scss">
.pay-complete {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;

  z-index: 9;
  background: linear-gradient(20deg, #faf2fb, var(--color-caption));
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: sale-hide 0.5s;
  animation-fill-mode: forwards;
  &.show {
    display: flex;
    animation: sale-show 0.3s;
    animation-fill-mode: forwards;
  }

  .complete-inner {
    text-align: center;
    padding-bottom: 250px;
    .img {
      margin: auto;
      width: 120px;
      height: 120px;
    }
    .title {
      margin-top: 20px;
      margin-bottom: 50px;
      font-size: 36px;
      font-weight: bold;
    }
  }
}
</style>
